<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="100px">
          <el-row
            >　
            <el-col :span="5">
              <div class="timebox">
                <el-form-item label="门店名称" prop="deptName">
                  <el-input
                    v-model="queryParams.deptName"
                    placeholder="请输入"
                    class="w-200"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="timebox">
                <el-form-item label="月份" prop="searchMonth">
                  <el-date-picker
                    v-model="queryParams.searchMonth"
                    type="month"
                    placeholder="选择月"
                    value-format="yyyy-MM"
                    class="w-160"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="timebox">
                <el-form-item label="完成率类型" prop="proContType">
                  <el-select
                    class="w-160"
                    v-model="queryParams.proContType"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in salaryType"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <!-- <el-col :span="6">
              <div class="timebox">
                <el-form-item label="确认状态" prop="confirmStatus">
                  <el-select
                    class="w-160"
                    v-model="queryParams.confirmStatus"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in confirmStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col> -->
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">完成率贡献值</div>
        <div class="op_right">
          <button class="primary_button" @click="handleAdd">添加</button>
          <button class="primary_button" @click="handleImport">导入</button>
          <!-- <button class="primary_button" @click="BatchSure">批量确认</button> -->
        </div>
      </div>

      <div class="table_list">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="month" label="月份" width="200px">
          </el-table-column>
          <el-table-column prop="deptName" label="门店名称" width="200px">
          </el-table-column>
          <el-table-column prop="proContType" label="完成率类型">
            <template slot-scope="scope">
              <span>{{ proContTypeObj[scope.row.proContType] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="proContVal" label="贡献值"></el-table-column>
          <el-table-column prop="proVal" label="完成率">
            <template slot-scope="scope">
              <span>{{ scope.row.proVal }}%</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="confirmStatus" label="确认状态">
            <template slot-scope="scope">
              <div
                :class="
                  scope.row.confirmStatus === 0
                    ? 'red'
                    : scope.row.confirmStatus === 1
                    ? 'green'
                    : ''
                "
              >
                {{ confirmStatusObj[scope.row.confirmStatus] }}
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="confirmTime"
            label="确认时间"
          ></el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="text" @click="Sure(scope.row)"
                >确认</el-button
              > -->
              <el-button size="mini" type="text" @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="text" @click="dele(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 新增 -->
      <el-dialog
        :visible.sync="RechcomdialogVisible"
        width="500px"
        title="新增完成率贡献值"
        class="no-dialog-padding"
        :before-close="handleClose"
      >
        <span>
          <div class="AddRules_box">
            <el-form
              ref="SalaryForm"
              :rules="AddRules"
              :model="SalaryForm"
              label-position="top"
            >
              <el-row>
                <el-form-item label="月份" prop="month">
                  <el-date-picker
                    v-model="SalaryForm.month"
                    type="month"
                    placeholder="选择月"
                    value-format="yyyy-MM"
                    class="w-100"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="门店" prop="storeId">
                  <el-select
                    class="w-100"
                    v-model="SalaryForm.storeId"
                    placeholder="请选择"
                    filterable
                  >
                    <el-option
                      v-for="item in this.$store.state.user.stores"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="用户" prop="nickname">
                  <div @click="ChooseUser">
                    <el-input
                      v-model="SalaryForm.nickname"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                </el-form-item> -->
              </el-row>
              <el-row>
                <el-form-item
                  label="完成率类型"
                  prop="proContType"
                  v-if="!SalaryForm.proContId"
                >
                  <el-select
                    class="w-100"
                    v-model="SalaryForm.proContType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in salaryType"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="贡献值" prop="proContVal">
                  <el-input
                    v-model="SalaryForm.proContVal"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item
                  label="完成率"
                  prop="proVal"
                  v-if="
                    SalaryForm.proContType != 'TR' &&
                    SalaryForm.proContType != 'AD'
                  "
                >
                  <div>
                    <el-input
                      v-model="SalaryForm.proVal"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="AddRulesSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 编辑 -->
      <el-dialog
        :visible.sync="editdialogVisible"
        width="500px"
        title="修改完成率贡献值"
        class="no-dialog-padding"
        :before-close="editHandleClose"
      >
        <span>
          <div class="AddRules_box">
            <el-form
              ref="editSalaryForm"
              :rules="editRules"
              :model="editSalaryForm"
              label-position="top"
            >
              <el-row>
                <el-form-item label="贡献值" prop="proContVal">
                  <el-input
                    v-model="editSalaryForm.proContVal"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row v-if="proContType != 'TR' && proContType != 'AD'">
                <el-form-item label="完成率" prop="proVal">
                  <div>
                    <el-input
                      v-model="editSalaryForm.proVal"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="editHandleClose"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="editRulesSubmit"
            :loading="btnLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 用户导入对话框 -->
      <el-dialog
        title="导入流程"
        :visible.sync="upload.open"
        width="400px"
        append-to-body
      >
        <div class="selectBox">
          <el-form
            :model="uploadForm"
            :rules="uploadFormRules"
            ref="uploadForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="类型" prop="type">
              <el-select v-model="uploadForm.type" placeholder="请选择">
                <el-option
                  v-for="item in TypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="月份" prop="moon">
              <el-date-picker
                v-model="uploadForm.moon"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
                class="w-180"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <el-upload
          ref="upload"
          :limit="1"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :on-error="handleFileError"
          :auto-upload="false"
          name="file"
          :data="upload.form"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip text-center" slot="tip">
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板</el-link
            >
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="submitFileForm"
            :loading="UploadLoading"
            >确 定</el-button
          >
          <el-button @click="uploadClose">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 用户列表查询 弹框 -->
      <el-dialog
        title="用户列表"
        :visible.sync="TrainingListShow"
        width="50%"
        :before-close="TrainingListClose"
      >
        <span>
          <div class="search-box-form">
            <el-form
              ref="TrainingListForm"
              :model="TrainingListForm"
              label-width="100px"
              size="small"
              :inline="true"
            >
              <el-form-item label="名称/手机号:" prop="keyword">
                <el-input
                  v-model="TrainingListForm.keyword"
                  placeholder="请输入名称或手机号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="TrainingListQuery"
                  >查询</el-button
                >
                <el-button @click="TrainingListReset" class="repeat"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="dataList" style="width: 100%" :border="true">
            <el-table-column width="200px">
              <template slot-scope="scope">
                <div class="table-radio">
                  <el-radio
                    :label="scope.row.id"
                    v-model="TrainingListForm.userId"
                    @change="changeTable(scope.row)"
                  ></el-radio>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="nickname" label="姓名"></el-table-column>
            <el-table-column prop="stageName" label="艺名"></el-table-column>
            <el-table-column prop="mobile" label="手机号"></el-table-column>
            <el-table-column prop="deptName" label="所属部门"></el-table-column>
            <el-table-column prop="postName" label="所属职位"></el-table-column>
          </el-table>
          <pagination
            v-show="TrainingListTotal > 0"
            :total="TrainingListTotal"
            :page.sync="TrainingListForm.pageNo"
            :limit.sync="TrainingListForm.pageSize"
            @pagination="getUserInterviewer"
          />
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="TrainingListSave">确 定</el-button>
          <el-button @click="TrainingListClose">取 消</el-button>
        </span>
      </el-dialog>

      <!-- <el-dialog
        title="批量确认"
        :visible.sync="batnsuredialogvisible"
        width="30%"
        :before-close="batnSureHandleClose"
      >
        <span>
          <el-form
            :model="batnSureRuleForm"
            :rules="batnSureRules"
            ref="batnSureRuleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="月份" prop="month">
              <el-date-picker
                v-model="batnSureRuleForm.month"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
                class="w-100"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="batnSureHandleClose">取 消</el-button>
          <el-button type="primary" @click="batnSureHandleSubmit"
            >确 定</el-button
          >
        </span>
      </el-dialog> -->
    </div>
  </div>
</template>
  
  <script>
import {
  DeleteProCont,
  getproContPage,
  getSalaryTypeList,
  getImportTemplate,
  userInterviewer,
  CreateProCont,
  SureProContConfirm,
  UpdateProCont,
  SureProContConfirmBatch,
  ImportProContDown,
  ImportProCont,
} from "@/api/bpm/salary";
import { getBaseHeader } from "@/utils/request";
export default {
  name: "Eryuoastorecontribution",

  data() {
    return {
      uploadForm: {
        type: "",
        moon: "",
      },
      TypeOptions: [
        {
          code: "TR",
          label: "技师招聘及流失",
        },
        {
          code: "MT",
          label: "美团好评",
        },
      ],

      uploadFormRules: {
        type: [{ required: true, message: "请输入", trigger: "blur" }],
        moon: [{ required: true, message: "请输入", trigger: "blur" }],
      },

      batnsuredialogvisible: false,
      batnSureRuleForm: {
        month: "",
      },
      // batnSureRules: {
      //   month: [{ required: true, message: "请输入", trigger: "blur" }],
      // },

      TrainingListShow: false,
      TrainingListForm: {
        keyword: "", //
        pageNo: 1,
        pageSize: 10,
      },
      TrainingListTotal: 0,
      TrainingListData: [],
      dataList: [], // 用户列表
      ckUser: {},

      RechcomdialogVisible: false,
      loading: false,
      activeIndex: 1,
      currentIndex: 1,
      tableData: [],
      StoreSlist: [],
      title: "",
      value: "",

      editdialogVisible: false,
      editSalaryForm: {
        proContVal: "",
        proVal: "",
        proContId: "",
      },
      editRules: {
        proContVal: [{ required: true, message: "请输入", trigger: "blur" }],
        proVal: [{ required: true, message: "请输入", trigger: "blur" }],
      },

      queryParams: {
        pageNo: 1,
        pageSize: 10,
        proContType: "",
        searchMonth: "",
        deptName: "",
      },

      salaryType: [], // 完成率类型

      // 流程导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: getBaseHeader(),
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API + "/admin-api" + "/store/proCont/import",
        // 表单
        form: {},
        // 校验规则
        rules: {
          key: [
            { required: true, message: "流程标识不能为空", trigger: "blur" },
          ],
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
          ],
        },
      },

      total: 0,

      AddRules: {
        month: [{ required: true, message: "请选择", trigger: "blur" }],
        storeId: [{ required: true, message: "请选择", trigger: "change" }],
        proContVal: [{ required: true, message: "请输入", trigger: "blur" }],
        // nickname: [{ required: true, message: "请选择", trigger: "change" }],
        // proVal: [{ required: true, message: "请输入", trigger: "blur" }],
        proContType: [{ required: true, message: "请选择", trigger: "change" }],
      },

      // 上限类型
      MoneyUpType: {
        LE: "<",
        EL: "≤",
      },

      userTypeObj: {
        S: "店长",
        T: "技师",
      },

      proContTypeObj: {
        CA: "加钟率",
        CU: "客量完成率",
        SO: "业绩完成率",
        TR: "技师招聘及流失",
        MT: "美团好评",
        MA: "奖金",
        AD: " 调整值",
      },

      // proContTypeOption: [
      //   {
      //     value: "CA",
      //     label: "加钟率",
      //   },
      //   {
      //     value: "CU",
      //     label: "客量完成率",
      //   },
      //   {
      //     value: "SO",
      //     label: "业绩完成率",
      //   },
      //   {
      //     value: "TR",
      //     label: "技师招聘及流失",
      //   },
      //   {
      //     value: "MT",
      //     label: "美团好评",
      //   },
      //   {
      //     value: "MA",
      //     label: "奖金",
      //   },
      //   {
      //     value: "AD",
      //     label: "调整值",
      //   },
      // ],

      MoneyUpTypeOptions: [
        {
          value: "LE",
          label: "<",
        },
        {
          value: "EL",
          label: "≤",
        },
      ],

      SalaryForm: {
        proContType: "",
        proContVal: "",
        userId: "",
        month: "",
        nickname: "",
        userType: "S",
        proVal: "",
        proContId: "",
        storeId: "",
      },

      confirmStatusObj: {
        0: "未确认",
        1: "已确认",
      },

      Token: "",
      timer: null,

      confirmStatusOptions: [
        {
          value: "0",
          label: "未确认",
        },
        {
          value: "1",
          label: "已确认",
        },
      ],

      UploadLoading: false,
      CloseLoading: null,
      btnLoading: false, // 编辑loading
      proContType: "",
    };
  },

  // 监听searchMonth 变化 就调取getList
  watch: {
    "queryParams.searchMonth"(val) {
      this.getList();
    },
  },

  created() {
    // this.getList();
    this.getSalaryTypeLists();
    const today = new Date();
    const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1);
    this.queryParams.searchMonth = `${lastMonth.getFullYear()}-${(
      lastMonth.getMonth() + 1
    )
      .toString()
      .padStart(2, "0")}`;
  },

  mounted() {},

  methods: {
    // 批量确认
    BatchSure() {
      this.batnsuredialogvisible = true;
    },

    ImportProContDowns(Token) {
      ImportProContDown({ token: Token })
        .then((res) => {
          this.$download.excel(res, "导入结果.xls");
        })
        .catch((err) => {});
    },

    // 导入类目金额查询完成状态
    ImportProConts(Token) {
      clearInterval(this.timer);
      ImportProCont({ token: Token })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            console.log(data);
            if (data.status === "N") {
              this.timer = setInterval(() => {
                this.ImportProConts(Token);
              }, 2000);
            } else if (data.status === "Y") {
              clearInterval(this.timer);
              this.ImportProContDowns(Token);
            } else if (data.status === "T") {
              this.$message.error("导入失败," + data.msg);
            }
          }
        })
        .catch((err) => {});
    },

    // 批量确认 确定
    // batnSureHandleSubmit() {
    //   this.$refs["batnSureRuleForm"].validate((valid) => {
    //     SureProContConfirmBatch(this.batnSureRuleForm)
    //       .then((res) => {
    //         const { code } = res;
    //         if (code === 0) {
    //           this.getList();
    //           this.$message({
    //             type: "success",
    //             message: "操作成功!",
    //           });
    //           this.batnSureHandleClose();
    //         }
    //       })
    //       .catch((err) => {});
    //   });
    // },

    // 批量确认 取消
    // batnSureHandleClose() {
    //   this.resetFormData("batnSureRuleForm");
    //   this.$nextTick(() => {
    //     this.batnsuredialogvisible = false;
    //   });
    // },

    editHandleClose() {
      this.resetFormData("editSalaryForm");
      this.editSalaryForm.proContId = "";
      this.$nextTick(() => {
        this.editdialogVisible = false;
      });
    },

    editRulesSubmit() {
      this.$refs["editSalaryForm"].validate((valid) => {
        this.btnLoading = true;
        UpdateProCont(this.editSalaryForm)
          .then((res) => {
            this.btnLoading = false;
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.editHandleClose();
            }
          })
          .catch((err) => {
            this.btnLoading = false;
          });
      });
    },

    // 确认
    Sure(row) {
      this.$confirm("此操作将单项确认, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          SureProContConfirm({
            proContId: row.proContId,
          })
            .then((Res) => {
              const { code } = Res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.getList();
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    // 获取面试官列表
    getUserInterviewer() {
      userInterviewer(this.TrainingListForm).then((res) => {
        const { code, data } = res;
        if (code == 0) {
          // this.interviewerList = data;
          this.dataList = data.records;
          this.TrainingListTotal = data.total;
        }
      });
    },

    // 用户列表选中行
    changeTable(row) {
      this.ckUser.userId = row.id;
      this.ckUser.nickname = row.nickname;
    },

    TrainingListClose() {
      this.TrainingListShow = false;
      this.TrainingListForm.userId = undefined;
      this.TrainingListReset();
    },

    TrainingListSave() {
      this.TrainingListShow = false;
      this.TrainingListForm.keyword = "";
      this.TrainingListForm.userId = undefined;
      // console.log(this.ckUser);
      this.SalaryForm.userId = this.ckUser.userId;
      this.SalaryForm.nickname = this.ckUser.nickname;
      this.$nextTick(() => {
        this.$refs["SalaryForm"].validateField("nickname");
      });
    },

    // // 选择用户
    // ChooseUser() {
    //   this.TrainingListShow = true;
    //   this.getUserInterviewer();
    // },

    // 搜索
    TrainingListQuery() {
      this.TrainingListForm.pageNo = 1;
      this.getUserInterviewer();
    },

    // 重置
    TrainingListReset() {
      this.TrainingListForm.keyword = "";
      this.TrainingListQuery();
    },

    /** 下载模板操作 */
    importTemplate() {
      getImportTemplate({}).then((response) => {
        this.$download.excel(response, "根据完成率类型获取导入模板.xlsx");
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.UploadLoading = false;
      this.CloseLoading.close();
      console.log("aa", response);
      let Token = response.data;
      this.ImportProConts(Token);
      if (response.code !== 0) {
        this.$modal.msgError(response.msg);
        return;
      }
      // 重置表单
      this.uploadClose();
      // 提示，并刷新
      this.$modal.msgSuccess("已加入导入列表，导入完成后将自动下载导入结果");
      this.getList();
    },
    handleFileError() {
      this.UploadLoading = false;
      this.CloseLoading.close();
    },
    uploadClose() {
      // 关闭弹窗
      this.upload.open = false;
      // 重置上传状态和文件
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      // 重置表单
      this.upload.form = {};
      this.resetForm("uploadForm");
    },
    /** 提交上传文件 */
    submitFileForm() {
      this.$refs["uploadForm"].validate((valid) => {
        if (valid) {
          const { type, moon } = this.uploadForm;

          this.UploadLoading = true;
          this.CloseLoading = this.$loading({
            lock: true,
            text: "正在导入中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          this.upload.url =
            process.env.VUE_APP_BASE_API +
            "/admin-api" +
            "/store/proCont/import" +
            "/" +
            type +
            "/" +
            moon;
          console.log(this.upload.url);
          this.$nextTick(() => {
            this.$refs.upload.submit();
          });
        }
      });
    },
    /** 处理任务分配规则列表的按钮操作 */
    handleAssignRule(row) {
      this.$refs["taskAssignRuleDialog"].initModel(row.id);
    },

    // 获取完成率类型
    getSalaryTypeLists() {
      getSalaryTypeList()
        .then((Res) => {
          const { code, data } = Res;
          if (code === 0) {
            this.salaryType = data;
          }
        })
        .catch((err) => {});
    },

    resQ() {
      this.queryParams.pageNo = 1;
      this.total = 0;
      this.tableData = [];
    },
    handleClose() {
      this.resetFormData("SalaryForm");
      this.SalaryForm.confId = "";
      this.$nextTick(() => {
        this.RechcomdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },

    // 确定
    AddRulesSubmit() {
      this.$refs["SalaryForm"].validate((valid) => {
        CreateProCont(this.SalaryForm)
          .then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.handleClose();
            }
          })
          .catch((err) => {});
      });
    },

    // 完成率贡献值
    getList() {
      this.loading = true;
      getproContPage(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.tableData = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    // 列表 删除
    dele(row) {
      this.$confirm("该条数据删除后无法撤销, 确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return DeleteProCont({ id: row.proContId });
        })
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        });
    },

    handleAdd() {
      this.RechcomdialogVisible = true;
      this.title = "添加完成率贡献值";
    },

    edit(row) {
      this.editdialogVisible = true;
      this.editSalaryForm.proContId = row.proContId;
      this.editSalaryForm.proContVal = row.proContVal;
      this.proContType = row.proContType;
      this.editSalaryForm.proVal = row.proVal;
    },
  },
};
</script>
        
        <style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}

.check {
  font-size: 12px;
  color: #0052d9;
}

.list_Stores {
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  .list_Stores_item {
    height: 46px;
    line-height: 46px;
    background: #ffffff;
    padding-left: 47px;
    border-bottom: 1px solid #e7e7e7;
  }
}

.AddRules_box {
  padding: 0 24px;
  .Rules_form_box {
    display: flex;
    .Rules_form_select {
      margin-right: 10px;
    }
  }
}

.radio_box {
  display: flex;
  margin-bottom: 10px;
}

.up_ipt {
  width: 300px;
  margin-right: 20px;
}
.down_ipt {
  width: 300px;
  margin-left: 10px;
}
.percentIcon {
  position: absolute;
  top: 55px;
  right: -15px;
}

.red {
  color: red;
}
.green {
  color: green;
}

.selectBox {
  margin-bottom: 20px;
}
</style>